<template>
	<AdminLayout activeKey="users" :breadcrumbs="['首页','用户管理','违规记录']" tabTitle="用户管理" currentPage="users-violations">
		<view class="page">
			<!-- 页面头部 -->
			<view class="page-header">
				<view class="header-info">
					<text class="page-title">违规记录管理</text>
					<text class="page-subtitle">查看和管理用户违规历史记录</text>
				</view>
				<view class="header-actions">
					<button class="btn-secondary" @click="goBack" v-if="userId">
						<text class="btn-icon iconfont icon-fanhui"></text>
						返回
					</button>
					<button class="btn-primary" @click="showAddDialog">
						<text class="btn-icon iconfont icon-xinzeng"></text>
						添加违规记录
					</button>
				</view>
			</view>

			<!-- 用户信息卡片(如果是单个用户) -->
			<view class="user-info-card" v-if="userId && userInfo.username">
				<view class="user-quick-info">
					<view class="user-avatar-medium">
						<text class="avatar-text">{{ getAvatarText(userInfo.username) }}</text>
					</view>
					<view class="user-details">
						<text class="username">{{ userInfo.username }}</text>
						<text class="nickname">{{ userInfo.nickname || '未设置昵称' }}</text>
					</view>
				</view>
				<view class="violation-summary">
					<view class="summary-item">
						<text class="summary-label">累计违规</text>
						<text class="summary-value" :style="{ color: totalViolations > 5 ? '#dc2626' : '#3b82f6' }">
							{{ totalViolations }}次
						</text>
					</view>
					<view class="summary-item">
						<text class="summary-label">风险等级</text>
						<view :class="['risk-badge', getRiskLevel(totalViolations)]">
							{{ getRiskText(totalViolations) }}
						</view>
					</view>
				</view>
			</view>

			<!-- 统计卡片 -->
			<view class="stats-cards" v-if="!userId">
				<view class="stat-card">
					<text class="stat-number">{{ stats.totalUsers }}</text>
					<text class="stat-label">总用户数</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.violationUsers }}</text>
					<text class="stat-label">有违规用户</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.totalViolations }}</text>
					<text class="stat-label">违规总次数</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.highRiskUsers }}</text>
					<text class="stat-label">高风险用户</text>
				</view>
			</view>

			<!-- 筛选工具栏 -->
			<view class="filter-container">
				<view class="filter-row">
					<view class="filter-group">
						<text class="filter-label">违规类型</text>
						<view class="filter-buttons">
							<button 
								v-for="type in violationTypes" 
								:key="type"
								class="filter-btn"
								:class="{ 'filter-btn-active': filterType === type }"
								@click="filterByType(type)"
							>
								{{ type }}
							</button>
						</view>
					</view>
				</view>
				<view class="filter-row">
					<view class="search-box">
						<text class="search-icon iconfont icon-sousuo"></text>
						<input 
							class="search-input" 
							v-model="searchKeyword" 
							placeholder="搜索用户名..."
							@confirm="searchViolations" />
					</view>
					<button class="btn-secondary" @click="loadViolations">
						<text class="btn-icon iconfont icon-shuaxin"></text>
						刷新
					</button>
				</view>
			</view>

			<!-- 违规记录列表 -->
			<view class="violations-container">
				<view class="table-header">
					<text class="table-title">违规记录列表</text>
					<text class="table-count">共 {{ filteredViolations.length }} 条记录</text>
				</view>

				<view class="violations-table">
					<view class="table-row table-header-row">
						<view class="table-cell cell-user">用户信息</view>
						<view class="table-cell cell-type">违规类型</view>
						<view class="table-cell cell-reason">违规原因</view>
						<view class="table-cell cell-time">标记时间</view>
						<view class="table-cell cell-marker">标记人</view>
						<view class="table-cell cell-actions">操作</view>
					</view>

					<view class="table-row" v-for="record in filteredViolations" :key="record._id">
						<view class="table-cell cell-user">
							<view class="user-info-mini">
								<view class="user-avatar-small">
									<text class="avatar-text-small">{{ getAvatarText(record.username) }}</text>
								</view>
								<view class="user-text">
									<text class="username-small">{{ record.username }}</text>
									<text class="violation-count-small">累计{{ record.violation_count || 1 }}次</text>
								</view>
							</view>
						</view>
						<view class="table-cell cell-type">
							<view class="type-badge">{{ record.type }}</view>
						</view>
						<view class="table-cell cell-reason">
							<text class="reason-text">{{ record.reason || '无' }}</text>
						</view>
						<view class="table-cell cell-time">
							<text class="time-text">{{ formatDate(record.mark_time) }}</text>
						</view>
						<view class="table-cell cell-marker">
							<text class="marker-text">{{ record.marker }}</text>
						</view>
						<view class="table-cell cell-actions">
							<button class="action-btn btn-view" @click="viewDetail(record)">
								<text class="btn-icon iconfont icon-chakan"></text>
							</button>
							<button class="action-btn btn-delete" @click="deleteRecord(record)">
								<text class="btn-icon iconfont icon-shanchu"></text>
							</button>
						</view>
					</view>

					<view class="empty-state" v-if="filteredViolations.length === 0">
						<text class="empty-icon">📝</text>
						<text class="empty-text">暂无违规记录</text>
					</view>
				</view>
			</view>

		<!-- 添加违规记录对话框 -->
		<view v-if="showDialog" class="modal-overlay" @click.self="hideDialog">
			<view class="modal-container">
					<view class="modal-header">
						<text class="modal-title">添加违规记录</text>
						<button class="modal-close" @click="hideDialog">
							<text class="iconfont icon-guanbi"></text>
						</button>
					</view>

					<view class="modal-body">
					<view class="form-group" v-if="!userId">
						<text class="form-label">选择用户<text class="required">*</text></text>
						<input 
							class="form-input" 
							type="text"
							v-model="form.username"
							placeholder="请输入用户名"
							confirm-type="done"
							:adjust-position="false"
							:focus="false"
							:cursor-spacing="100"
							@focus="onInputFocus"
							@blur="onInputBlur" />
					</view>

						<view class="form-group">
							<text class="form-label">违规类型<text class="required">*</text></text>
							<view class="radio-group">
								<view 
									v-for="type in violationTypes" 
									:key="type"
									class="radio-item"
									:class="{ active: form.type === type }"
									@click="form.type = type"
								>
									<view class="radio-dot"></view>
									<text class="radio-label">{{ type }}</text>
								</view>
							</view>
						</view>

					<view class="form-group">
						<text class="form-label">违规原因</text>
						<textarea 
							class="form-textarea" 
							v-model="form.reason"
							placeholder="请输入违规的具体情况..."
							maxlength="500"
							:adjust-position="false"
							:cursor-spacing="100"
							:auto-height="false"
							@focus="onInputFocus"
							@blur="onInputBlur" />
						<text class="char-count">{{ form.reason.length }}/500</text>
					</view>
					</view>

					<view class="modal-footer">
						<button class="btn-cancel" @click="hideDialog">取消</button>
						<button class="btn-submit" @click="submitViolation" :disabled="submitting">
							{{ submitting ? '提交中...' : '确认添加' }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'

export default {
	components: { AdminLayout },
	data() {
		return {
			userId: '',
			userInfo: {},
			violations: [],
			searchKeyword: '',
			filterType: '全部',
			violationTypes: ['全部', '恶意取消任务', '虚假交易行为', '违反平台规则', '收到多次投诉', '其他违规'],
			stats: {
				totalUsers: 0,
				violationUsers: 0,
				totalViolations: 0,
				highRiskUsers: 0
			},
		showDialog: false,
		form: {
			username: '',
			type: '',
			reason: ''
		},
		submitting: false,
		loading: false,
		inputFocused: false
		}
	},
	computed: {
		totalViolations() {
			return this.userInfo.violation_count || 0
		},
		filteredViolations() {
			let result = this.violations

			if (this.filterType !== '全部') {
				result = result.filter(v => v.type === this.filterType)
			}

			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				result = result.filter(v => 
					(v.username && v.username.toLowerCase().includes(keyword)) ||
					(v.nickname && v.nickname.toLowerCase().includes(keyword)) ||
					(v.reason && v.reason.toLowerCase().includes(keyword))
				)
			}

			return result
		}
	},
	onLoad(options) {
		if (options.userId) {
			this.userId = options.userId
			this.loadUserInfo()
		}
		this.loadViolations()
		if (!this.userId) {
			this.loadStats()
		}
	},
	methods: {
		async loadUserInfo() {
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getUserDetail',
						userId: this.userId
					}
				})
				
				if (res.result && res.result.code === 0) {
					this.userInfo = res.result.data || {}
				}
			} catch (e) {
				console.error('获取用户信息失败:', e)
			}
		},

		async loadViolations() {
			this.loading = true
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getViolations',
						userId: this.userId || null
					}
				})
				
				if (res.result && res.result.code === 0) {
					this.violations = res.result.data || []
				} else {
					uni.showToast({ title: res.result?.msg || '获取违规记录失败', icon: 'none' })
				}
			} catch (e) {
				console.error('获取违规记录失败:', e)
				uni.showToast({ title: '获取违规记录失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},

		async loadStats() {
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getViolationStats'
					}
				})
				
				if (res.result && res.result.code === 0) {
					this.stats = res.result.data || this.stats
				}
			} catch (e) {
				console.error('获取统计数据失败:', e)
			}
		},

		filterByType(type) {
			this.filterType = type
		},

		searchViolations() {
			// 搜索功能已通过computed实现
		},

		showAddDialog() {
			this.form = {
				username: this.userInfo.username || '',
				type: '',
				reason: ''
			}
			this.showDialog = true
		},

		hideDialog() {
			this.showDialog = false
			this.form = {
				username: '',
				type: '',
				reason: ''
			}
		},

		async submitViolation() {
			if (!this.userId && !this.form.username) {
				uni.showToast({ title: '请输入用户名', icon: 'none' })
				return
			}
			if (!this.form.type) {
				uni.showToast({ title: '请选择违规类型', icon: 'none' })
				return
			}

			this.submitting = true
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'addViolation',
						userId: this.userId,
						username: this.form.username,
						type: this.form.type,
						reason: this.form.reason
					}
				})
				
				if (res.result && res.result.code === 0) {
					uni.showToast({ title: '添加成功', icon: 'success' })
					this.hideDialog()
					this.loadViolations()
					if (this.userId) {
						this.loadUserInfo()
					}
				} else {
					uni.showToast({ title: res.result?.msg || '添加失败', icon: 'none' })
				}
			} catch (e) {
				console.error('添加违规记录失败:', e)
				uni.showToast({ title: '添加失败', icon: 'none' })
			} finally {
				this.submitting = false
			}
		},

		viewDetail(record) {
			// 可以跳转到用户详情页
			uni.navigateTo({
				url: `/pages/admin/users/detail?userId=${record.user_id}`
			})
		},

		async deleteRecord(record) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条违规记录吗?',
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'deleteViolation',
									recordId: record._id,
									userId: record.user_id
								}
							})
							
							if (result.result && result.result.code === 0) {
								uni.showToast({ title: '删除成功', icon: 'success' })
								this.loadViolations()
								if (this.userId) {
									this.loadUserInfo()
								}
							} else {
								uni.showToast({ title: result.result?.msg || '删除失败', icon: 'none' })
							}
						} catch (e) {
							console.error('删除失败:', e)
							uni.showToast({ title: '删除失败', icon: 'none' })
						}
					}
				}
			})
		},

		goBack() {
			uni.navigateBack()
		},

		getRiskLevel(count) {
			if (count >= 5) return 'risk-high'
			if (count >= 3) return 'risk-medium'
			return 'risk-low'
		},

		getRiskText(count) {
			if (count >= 5) return '高风险'
			if (count >= 3) return '中风险'
			if (count > 0) return '低风险'
			return '正常'
		},

		formatDate(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			return date.toLocaleString('zh-CN')
		},

	getAvatarText(username) {
		if (!username) return '?'
		if (/[\u4e00-\u9fa5]/.test(username)) {
			return username.charAt(0)
		}
		return username.substring(0, 2).toUpperCase()
	},

	onInputFocus(e) {
		console.log('输入框获得焦点:', e)
		this.inputFocused = true
	},

	onInputBlur(e) {
		console.log('输入框失去焦点:', e)
		this.inputFocused = false
	}
}
}
</script>

<style scoped>
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	display: block;
	margin-bottom: 8rpx;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.header-actions {
	display: flex;
	gap: 16rpx;
}

.btn-secondary, .btn-primary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	border-radius: 12rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	transition: all 0.2s ease;
}

.btn-secondary {
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

.btn-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border: none;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.btn-icon.iconfont {
	font-size: 28rpx;
}

.user-info-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-quick-info {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.user-avatar-medium {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.avatar-text {
	font-size: 40rpx;
	font-weight: 700;
	color: #fff;
}

.user-details .username {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a202c;
	display: block;
	margin-bottom: 8rpx;
}

.user-details .nickname {
	font-size: 24rpx;
	color: #64748b;
	display: block;
}

.violation-summary {
	display: flex;
	gap: 48rpx;
}

.summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.summary-label {
	font-size: 24rpx;
	color: #64748b;
}

.summary-value {
	font-size: 48rpx;
	font-weight: 700;
}

.risk-badge {
	padding: 8rpx 20rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.risk-high {
	background: #fee2e2;
	color: #dc2626;
	border: 2rpx solid #fca5a5;
}

.risk-medium {
	background: #fef3c7;
	color: #d97706;
	border: 2rpx solid #fcd34d;
}

.risk-low {
	background: #d1fae5;
	color: #059669;
	border: 2rpx solid #6ee7b7;
}

.stats-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.stat-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.stat-number {
	font-size: 56rpx;
	font-weight: 700;
	color: #3b82f6;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #64748b;
}

.filter-container {
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
}

.filter-row {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-bottom: 20rpx;
}

.filter-row:last-child {
	margin-bottom: 0;
}

.filter-group {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.filter-label {
	font-size: 26rpx;
	color: #64748b;
	font-weight: 600;
	white-space: nowrap;
}

.filter-buttons {
	display: flex;
	gap: 12rpx;
	flex-wrap: wrap;
}

.filter-btn {
	padding: 12rpx 24rpx;
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #e2e8f0;
	border-radius: 12rpx;
	font-size: 24rpx;
	transition: all 0.2s ease;
}

.filter-btn-active {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border-color: #3b82f6;
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #f8fafc;
	border: 2rpx solid #e2e8f0;
	border-radius: 12rpx;
	padding: 12rpx 20rpx;
}

.search-icon {
	font-size: 28rpx;
	color: #64748b;
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	border: none;
	background: transparent;
}

.violations-container {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	overflow: hidden;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 32rpx;
	background: #f8fafc;
	border-bottom: 2rpx solid #e2e8f0;
}

.table-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a202c;
}

.table-count {
	font-size: 24rpx;
	color: #64748b;
}

.violations-table {
	width: 100%;
}

.table-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 2fr 1.2fr 1fr 0.8fr;
	align-items: center;
	padding: 24rpx 32rpx;
	border-bottom: 2rpx solid #f8fafc;
	transition: all 0.2s ease;
}

.table-row:hover:not(.table-header-row) {
	background: #f8fafc;
}

.table-header-row {
	background: #f8fafc;
	font-weight: 600;
	color: #64748b;
	font-size: 26rpx;
	border-bottom: 2rpx solid #e2e8f0;
}

.table-cell {
	padding: 0 8rpx;
	display: flex;
	align-items: center;
}

.user-info-mini {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.user-avatar-small {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.avatar-text-small {
	font-size: 24rpx;
	font-weight: 700;
	color: #fff;
}

.user-text {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.username-small {
	font-size: 26rpx;
	font-weight: 600;
	color: #1a202c;
}

.violation-count-small {
	font-size: 22rpx;
	color: #dc2626;
}

.type-badge {
	padding: 8rpx 16rpx;
	background: #fef3c7;
	color: #d97706;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.reason-text {
	font-size: 24rpx;
	color: #475569;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.time-text, .marker-text {
	font-size: 24rpx;
	color: #64748b;
}

.cell-actions {
	justify-content: center;
	gap: 8rpx;
}

.action-btn {
	width: 56rpx;
	height: 56rpx;
	border-radius: 12rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.action-btn .btn-icon {
	font-size: 24rpx;
}

.btn-view {
	background: #ecfeff;
	color: #0891b2;
}

.btn-view:hover {
	background: #cffafe;
	transform: scale(1.1);
}

.btn-delete {
	background: #fef2f2;
	color: #dc2626;
}

.btn-delete:hover {
	background: #fee2e2;
	transform: scale(1.1);
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 32rpx;
	gap: 16rpx;
}

.empty-icon {
	font-size: 80rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #94a3b8;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	pointer-events: auto;
}

.modal-container {
	width: 90%;
	max-width: 700rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.15);
	position: relative;
	z-index: 10;
	pointer-events: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 700;
}

.modal-close {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.modal-body {
	padding: 32rpx;
	max-height: 60vh;
	overflow-y: auto;
	position: relative;
	z-index: 1;
}

.form-group {
	margin-bottom: 24rpx;
	position: relative;
	z-index: 2;
}

.form-label {
	display: block;
	margin-bottom: 12rpx;
	font-size: 28rpx;
	font-weight: 600;
	color: #374151;
	pointer-events: none;
	user-select: none;
}

.required {
	color: #dc2626;
}

.form-input {
	width: 100%;
	height: 88rpx;
	padding: 20rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 12rpx;
	font-size: 28rpx;
	line-height: normal;
	background: #fff;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
	pointer-events: auto;
}

.form-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
	outline: none;
}

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 20rpx;
	background: #f8fafc;
	border: 2rpx solid #e2e8f0;
	border-radius: 12rpx;
	cursor: pointer;
	transition: all 0.2s ease;
}

.radio-item.active {
	background: #eff6ff;
	border-color: #3b82f6;
}

.radio-dot {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 4rpx solid #cbd5e1;
	position: relative;
}

.radio-item.active .radio-dot {
	border-color: #3b82f6;
}

.radio-item.active .radio-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #3b82f6;
}

.radio-label {
	font-size: 26rpx;
	color: #475569;
	font-weight: 500;
}

.form-textarea {
	width: 100%;
	min-height: 200rpx;
	padding: 20rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 12rpx;
	font-size: 28rpx;
	line-height: 1.5;
	background: #fff;
	box-sizing: border-box;
	resize: vertical;
	position: relative;
	z-index: 10;
	pointer-events: auto;
}

.form-textarea:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
	outline: none;
}

.char-count {
	display: block;
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #94a3b8;
	text-align: right;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
	padding: 24rpx 32rpx;
	background: #f8fafc;
	border-top: 2rpx solid #e2e8f0;
}

.btn-cancel, .btn-submit {
	padding: 16rpx 32rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: none;
	transition: all 0.2s ease;
}

.btn-cancel {
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

.btn-submit {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@media (max-width: 900px) {
	.stats-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.user-info-card {
		flex-direction: column;
		align-items: stretch;
		gap: 24rpx;
	}
	
	.violation-summary {
		justify-content: space-around;
	}
	
	.table-row {
		grid-template-columns: 1fr;
		gap: 16rpx;
	}
}
</style>

